<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="../../css/style.css" />
    <link rel="stylesheet" href="../../css/element.css?v=1">
    <script src="../../js/zyrpublic.js?v=1.0"></script>
    <script src="../../js/zyrfunction.js?v=1.0"></script>
    <script src="../../javascript/vue.js"></script>
    <script src="../../javascript/elementui.js"></script>
    <script src="../../javascript/axios.min.js"></script>
    <script src="../../js/qs.js"></script>
</head>

<body>
    <div class="page-wrap" id="app">
        <section class="page-hd t">
            <header>
                <h5 class="title">
                    <a href="#" class="red">赠品管理</a>
                </h5>
            </header>
            <hr />
        </section>
        <div style="margin-bottom: 20px">
            <el-button type="primary" @click="addGoods">新增</el-button>
            <el-button plain @click="delGoods">删除</el-button>
        </div>
        <el-table @selection-change="handleSelectionChange" :header-cell-style="{background:'#f7f4f8', color:'#000'}"
            :data="tablegiftlList" tooltip-effect="dark" style="width: 100%">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="pid" label="商品ID">
            </el-table-column>
            <el-table-column prop="activityName" label="活动名称">
            </el-table-column>
            <el-table-column prop="prodName" label="商品名称">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间"> </el-table-column>
            <el-table-column prop="receiveEffectiveDays" label="有效天数">
            </el-table-column>
            <el-table-column label="是否启用">
                <template slot-scope="scope">
                    <div>
                        <el-switch active-color="#13ce66" inactive-color="#000" @change="handleChangeSwitch(scope.row)"
                            v-model="scope.row.enable">
                        </el-switch>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <span @click="fndel(scope.row)" style="color: #11947f; display: inline-block;cursor: pointer;">
                        <i class="el-icon-delete"></i>删除</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
            :page-sizes="[5,10,15,20,25,30]" :page-size="pageSize" layout="total, sizes, prev, pager, next"
            :total="giftPages">
        </el-pagination>
        <el-dialog width="60%" title="新增赠品" :visible.sync="addGiftToast" :close-on-click-modal="false" append-to-body>
            <div>
                <div>
                    <el-form ref="form" :model="formAddgift" label-width="150px">
                        <el-form-item label="商品名称" style="width: 360px;">
                            <el-input v-model="formAddgift.activityName"></el-input>
                        </el-form-item>
                        <el-form-item label="是否上架" style="width: 360px;">
                            <el-switch active-color="#13ce66" inactive-color="#000" v-model="giftenable">
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="活动商品">
                            <el-input style="width:100px" v-model="formAddgift.pid" type="number"></el-input>
                            <el-button type="primary" @click="handleSelectGift">选择商品</el-button>
                        </el-form-item>
                        <el-form-item label="使用有效期">
                            <el-input style="width:100px;margin-right:15px" v-model="formAddgift.receiveEffectiveDays"
                                type="number" min="1"
                                onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
                                onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
                            </el-input><span>天</span>
                        </el-form-item>
                        <el-form-item>
                            <div style="margin-top: 20px; display: flex;">
                                <el-button type="primary" @click="confirmAddGift">确认</el-button>
                                <el-button @click="addGiftToast = false">取消</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>

            </div>
        </el-dialog>

        <!-- 赠品选择 -->
        <el-dialog width="80%" title="赠品选择" :visible.sync="showGoodsList" :close-on-click-modal="false" append-to-body>
            <div>
                <el-table :data="tableGoodsList" tooltip-effect="dark" style="width: 100%">
                    <el-table-column label width="35">
                        <template slot-scope="scope">
                            <el-radio :label="scope.$index" :value="templateRadio"
                                @change.native="getTemplateRow(scope.$index,scope.row)">&nbsp;</el-radio>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品ID" prop="productEntity.id" width="80">
                    </el-table-column>
                    <el-table-column label="商品ID" prop="productEntity.identify" width="80">
                    </el-table-column>
                    <el-table-column prop="productEntity.title" label="商品名称">
                    </el-table-column>
                    <el-table-column label="商品图片">
                        <template slot-scope="scope">
                            <img style="width:100px;height:100px" :src="visitimgurl+'/'+scope.row.productEntity.headimg"
                                alt="">
                        </template>
                    </el-table-column>
                    <el-table-column label="是否上架">
                        <template slot-scope="scope">
                            <el-switch active-color="#13ce66" disabled inactive-color="#000"
                                :value="scope.row.productEntity.isshelves==1?true:false"></el-switch>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="margin-top: 20px; display: flex;">
                    <el-pagination @size-change="handleGoodsSizeChange" @current-change="handleGoodsCurrentChange"
                        :current-page="goodsParams.pageNo" :page-size="goodsParams.pageSize"
                        layout="total, sizes, prev, pager, next" :total="goodsPages">
                    </el-pagination>
                    <el-button style="margin-left: 30px;" type="primary" @click="confirmChooseGoods">确认选中商品
                    </el-button>
                </div>
            </div>
        </el-dialog>

    </div>
</body>

<script>
    var instance = axios.create({
        baseURL: httpurl,
        timeout: 3000,
        headers: {
            "Content-Type": "application/json",
            Authorization: GetTokenInfo(),
        },
    });
</script>

<script>
    var app = new Vue({
        el: "#app",
        data() {
            return {
                visitimgurl: visitimgurl,
                val1: true,
                pageNum: 1,
                pageSize: 10,
                giftPages: 10,
                tabIndex: 1,
                type: 1,
                tablegiftlList: [],
                idList: [],
                addGiftToast: false,
                giftenable: true,
                formAddgift: {
                    receiveEffectiveDays: 7,
                    enable: true,
                    activityName: ''
                },
                pid: 0,
                showGoodsList: false,
                goodsParams: {
                    isshelves:1,
                    pageNo: 1,
                    pageSize: 10,
                    typeid: 0,//商品分类
                    inputname: '',//商品标题
                    pid: '',//商品id
                    identify: ''//商品编号
                },
                templateRadio: '',
                tableGoodsList: [],
                goodsPages: 10
            };
        },

        mounted() {
            this.getqueryMemberGiveawayList();
        },

        methods: {
            addGoods() {
                this.addGiftToast = true
            },
            //赠品列表查询
            getqueryMemberGiveawayList() {
                instance
                    .get("queryMemberGiveawayList", {
                        params: {
                            pageNo: this.pageNum,
                            pageSize: this.pageSize,
                        },
                    })
                    .then((res) => {
                        console.log(res);
                        if (res.data.rtnCode == 200) {
                            list = res.data.data.list;
                            this.tablegiftlList = list;
                            list.forEach((v, i) => {
                                this.tablegiftlList[i].enable = v.enable == 1 ? true : false
                            })
                            this.giftPages = res.data.data.total;
                        } else {
                            this.tablegiftlList = []
                        }
                    });
            },
            // 批量删除
            async delGoods() {
                let confirmResult = await this.$confirm(
                    "此操作将永久删除该数据, 是否继续?",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                ).catch((err) => err);
                if (confirmResult !== "confirm") {
                    return this.$message.info("已取消删除！");
                }

                let res = await instance.post("updateMemberGiveawayByIdList ", {
                    idList: this.idList,
                    deleted: 1,
                });
                if (res.data.rtnCode == 200) {
                    this.getqueryMemberGiveawayList()
                    this.$message.success('删除赠品成功')

                } else {
                    this.$message.error('删除赠品失败')
                }
            },
            // 单个删除
            async fndel(val) {
                this.idList.push(val.id)
                this.delGoods()
            },
            // 选中列表项
            handleSelectionChange(val) {
                let idList = [];
                val.forEach((v) => {
                    idList.push(v.id);
                });
                this.idList = idList;
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getqueryMemberGiveawayList();
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.getqueryMemberGiveawayList();
            },
            // 是否启用
            handleChangeSwitch(e) {
                instance.post('updateMemberGiveaway', {
                    "enable": e.enable ? 1 : 0,
                    "id": e.id
                }).then(res => {
                    this.$message.success(res.data.msg)
                    this.getqueryMemberGiveawayList()
                })
            },
            // 新增赠品
            // 点击确认新增赠品
            confirmAddGift() {
                this.formAddgift.enable = this.giftenable ? 1 : 0
                console.log(this.formAddgift);
                if (this.formAddgift.pid == 0) {
                    this.$message.error('请选择商品')
                    return
                }
                if (this.formAddgift.activityName.trim() == "" || this.formAddgift.receiveEffectiveDays == "") {
                    this.$message.error('请确保提交信息不为空')
                    return
                }
                console.log(this.formAddgift);
                instance.post('insertMemberGiveaway', this.formAddgift).then(res => {
                    console.log(res);
                    if (res.data.rtnCode == 200) {
                        this.$message.success(res.data.msg)
                        this.addGiftToast = false
                        this.formAddgift = {}
                        this.formAddgift.activityName = ''
                        this.formAddgift.receiveEffectiveDays = 7
                        this.formAddgift.enable = true

                        this.getqueryMemberGiveawayList()
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })
            },
            handleSelectGift() {
                this.showGoodsList = true
                this.getGoodList()
            },
            getGoodList() {
                console.log(this.goodsParams);
                instance.get('Productlistpc', {
                    params: this.goodsParams
                }).then(res => {
                    if (res.data.rtnCode == 200) {
                        this.tableGoodsList = res.data.data.list
                        this.goodsPages = res.data.data.total
                    } else {
                        this.$message.error(res.data.msg)
                    }
                    console.log(res);
                })
            },
            getTemplateRow(index, row) {
                this.pid = row.id
                this.templateRadio = index
            },
            handleGoodsSizeChange(val) {
                console.log(val);
                this.goodsParams.pageSize = val
                this.getGoodList()
            },
            handleGoodsCurrentChange(val) {
                console.log(val);
                this.goodsParams.pageNo = val
                this.getGoodList()
            },
            // 点击确认选中赠品
            confirmChooseGoods() {
                this.formAddgift.pid = this.pid
                this.showGoodsList = false
            },
        },
    });
</script>

</html>